<template>
  <!-- 登录组件容器 -->
  <div class="login-tab" ref="myRef">
    <div class="login-nav">
      <!-- 渲染login-nav -->
      <!-- :class="[静态的类, 动态的类]" -->
      <!-- 动态的类: 满足条件时 加active类 即 class="nav-item active" -->
      <!-- 点击切换nav里面的项 -->
      <div
        v-for="tab of tabData"
        :key="tab"
        :class="['nav-item', { active: currentTab === tab }]"
        @click="changeTab(tab)"
      >
        <!-- nav栏的每一项 -->
        {{ tab }}
      </div>
    </div>
    <div class="login-component">
      <!-- 实现缓存AccountLogin组件的状态保证切换时不会丢失用户名和密码输入框信息 -->
      <keep-alive>
        <!-- 显示/隐藏渲染切换的组件 -->
        <!-- 动态组件是一个组件，vue API: <component :is="当前组件状态(数据)"></component> -->
        <component :is="currentTabComponent"></component>
      </keep-alive>
    </div>
    <!-- 首先加载 账号密码登录组件 -->
  </div>
</template>

<script>
import AccountLogin from "./AccountLogin.vue";

//定义异步加载的组件
//实际上并没有导入组件
//vue3.x写法：
// const QrcodeLogin = Vue.defineAsyncComponent(() => import("./QrcodeLogin.vue"));
// const MobileLogin = Vue.defineAsyncComponent(() => import("./MobileLogin.vue"));

//vue2.x写法：
const QrcodeLogin = () => import("./QrcodeLogin.vue");
const MobileLogin = () => import("./MobileLogin.vue");

export default {
  name: "MainLogin",
  components: {
    AccountLogin,
    QrcodeLogin,
    MobileLogin,
  },
  data() {
    return {
      tabData: ["Account", "Qrcode", "Mobile"],
      currentTab: "Account",
    };
  },
  methods: {
    //点击 Account/Qrcode/Mobile时切换nav栏显示的样式
    changeTab(tab) {
      this.currentTab = tab;
    },
  },
  computed: {
    // 在this.currentTab改变时会重新计算
    //显示组件的写法：<account-login></account-login>
    currentTabComponent() {
      //当前名称 + -login
      return this.currentTab.toLowerCase() + "-login";
    },
  },
  mounted() {
    // console.log(this.$refs.myRef);
  },
};
</script>

<style lang="scss" scoped>
.login-tab {
  width: 500px;
  margin: 50px auto;
  border: 1px solid #000;

  .login-nav {
    height: 50px;
    border-bottom: 1px solid #000;

    .nav-item {
      float: left;
      width: 33.33%;
      text-align: center;
      line-height: 50px;

      &.active {
        background-color: #000;
        color: #fff;
      }
    }
  }
}
</style>